"use client"
import React, { useEffect, useState } from 'react';
import { List, message, Typography } from 'antd';

import { getUsers, updUser } from '@/api/usersApi'
import { contact } from '@/utils/data.json'

const { Paragraph } = Typography;
export default function Carousel() {
  const [data, setData] = useState(contact);
  const Init = async () => {
    const res = await getUsers()
    if (res?.flag) {
      setData(res.data)
    } else {
      message.error('服务器未响应');
    }
  }
  useEffect(() => {
    // Init()
  }, [])

  return (
    <List
      size="large"
      bordered
      dataSource={data}
      renderItem={(v, i) => <List.Item>{v.type}:
        <Paragraph
          style={{ width: '100%' }}
          editable={{
            tooltip: '点击编辑文档',
            onChange: (val) => {
              data[i].text = val
              const newData = [...data];
              setData(newData)
            },
            triggerType: ['text', 'icon'],
          }}
        >
          {v.text}
        </Paragraph>
      </List.Item>}
    />
  );
};
